﻿<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>jQuery多张图片同时上传组件</title>

<style>

    .add_div {
        width: 400px;
        height: 500px;
        border: solid #ccc 1px;
        margin-top: 40px;
        margin-left: 170px;
        padding-left: 20px;
    }

    .file-list {
        height: 125px;
        display: none;
        list-style-type: none;
    }

    .file-list img {
        max-width: 70px;
        vertical-align: middle;
    }

    .file-list .file-item {
        margin-bottom: 10px;
        float: left;
        margin-left: 20px;
    }


    .file-list .file-item .file-del {
        display: block;
        margin-left: 20px;
        margin-top: 5px;
        cursor: pointer;
    }

</style>

</head>
<body>

<div class="add_div">
    <p>
        <span>名称：</span>
        <input type="text" name="" id="name" value="">
    </p>
    <p>
        <span>图片：</span>
        <input type="file" name="" id="choose-file" multiple="multiple">
    </p>
    <p>
    <ul class="file-list ">

    </ul>
    </p>
    <button style="cursor: pointer;margin-left: 150px;" href="javascript:;" id="upload">上传</button>

</div>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
</div>
</body>
</html>